<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历详情</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .resume-line {
            border-bottom: 1px dashed #e0e0e0;
            padding: 6px 0 6px 0;
        }
        .resume-line:last-child {
            border-bottom: none;
        }
        body {
            background: linear-gradient(120deg, #f5f7fa 60%, #e3f2fd 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        .container {
            max-width: 900px;
            margin: 32px auto 24px auto;
            background: #fff;
            border-radius: 26px;
            box-shadow: 0 8px 36px rgba(0,113,227,0.13);
            padding: 36px 24px 28px 24px;
        }
        h2 {
            text-align: center;
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 18px;
            color: #0071e3;
            letter-spacing: 1.5px;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 16px;
            margin-bottom: 32px;
            border-radius: 14px;
            background: #f6fafd;
            box-shadow: 0 2px 10px #0071e31a;
            border: 1px solid #e0e0e0;
            padding: 18px 10px 10px 10px;
        }
        .info-card {
            background: #fff;
            border-radius: 10px;
            padding: 14px 10px 10px 14px;
            box-shadow: 0 1px 4px #0071e31a;
            border-left: 5px solid #00c3a0;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 2px;
            transition: box-shadow 0.2s, border-color 0.2s;
        }
        .info-card:hover {
            box-shadow: 0 6px 24px #00c3a044;
            border-left: 5px solid #0071e3;
            background: #f0f7ff;
        }
        .info-card h3 {
            margin: 0 0 10px 0;
            color: #00b894;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .info-card p {
            margin: 0;
            font-size: 18px;
            color: #222;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .content-box {
            background: #f8fbff;
            border-radius: 18px;
            padding: 22px 18px 16px 18px;
            box-shadow: 0 2px 12px rgba(0,113,227,0.08);
            margin-bottom: 24px;
            border: 1px solid #e0e0e0;
        }
        .content-title {
            font-size: 20px;
            font-weight: 700;
            color: #0071e3;
            margin-bottom: 12px;
            letter-spacing: 1px;
        }
        .content-box > div {
            border-bottom: 1px dashed #e0e0e0;
            padding: 6px 0 6px 0;
        }
        .content-box > div:last-child {
            border-bottom: none;
        }
        .back-link {
            display: inline-block;
            margin-bottom: 8px;
            color: #0071e3;
            text-decoration: underline;
            font-size: 15px;
        }
        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 18px 0 0 0;
        }
        .btn {
            padding: 10px 22px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            font-size: 16px;
        }
        .btn-primary {
            background: linear-gradient(90deg,#1e90ff 60%,#00c3a0 100%);
            color: white;
            box-shadow: 0 2px 8px #00c3a044;
        }
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        .btn:hover {
            transform: translateY(-2px) scale(1.07);
            box-shadow: 0 8px 24px #00c3a044;
            opacity: 0.97;
        }
        .btn-primary:hover {
            background: linear-gradient(90deg,#0071e3 60%,#00c3a0 100%);
        }
        .btn-secondary:hover {
            background: #5a6268;
        }
        @media (max-width: 768px) {
            .info-grid { grid-template-columns: 1fr; }
            .container { width: 98vw; padding: 8px 2vw; }
            .content-box { padding: 10px 4px; }
            .action-buttons { flex-direction: column; align-items: stretch; gap: 8px; }
        }
    </style>
</head>
<body>
    <div style="width:100%;background:linear-gradient(90deg,#0071e3 60%,#00c3a0 100%);padding:18px 0 10px 0;box-shadow:0 2px 12px rgba(0,113,227,0.08);margin-bottom:18px;">
        <div style="max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <div style="width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-right:14px;box-shadow:0 2px 8px rgba(0,113,227,0.10);">
                    <span style="font-size:26px;font-weight:bold;color:#0071e3;">育</span>
                </div>
                <span style="font-size:22px;font-weight:700;color:#fff;letter-spacing:2px;">育聘智联</span>
                <span style="margin-left:24px;font-size:16px;color:#e0f7fa;font-weight:500;">AI智能简历分析与面试</span>
            </div>
            <a href="/" style="background:#fff;color:#0071e3;font-weight:600;padding:8px 22px;border-radius:10px;text-decoration:none;box-shadow:0 2px 8px #0071e344;font-size:16px;transition:background 0.2s;">返回首页</a>
        </div>
    </div>
    <div class="container">
        <!-- 头像与姓名区块 -->
        <div style="display:flex;align-items:center;gap:18px;margin-bottom:18px;">
            <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#00c3a0 60%,#0071e3 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px #00c3a044;">
                <span style="font-size:32px;font-weight:800;color:#fff;">{{ resume[1][0] if resume[1] else '人' }}</span>
            </div>
            <div>
                <div style="font-size:22px;font-weight:800;color:#0071e3;letter-spacing:1px;">{{ resume[1] }}</div>
                <div style="font-size:15px;color:#888;margin-top:2px;">简历文件名</div>
            </div>
        </div>
        <div style="display:flex;justify-content:center;gap:24px;margin-bottom:24px;margin-top:8px;flex-wrap:wrap;">
            <button id="score-btn" style="background:#0071e3;color:#fff;border:none;border-radius:12px;padding:14px 36px;font-size:18px;box-shadow:0 2px 12px #0071e344;cursor:pointer;font-weight:600;letter-spacing:1px;transition:background 0.2s;">简历分析</button>
            <a href="/ai_interview_chat/{{ resume[0] }}" id="interview-btn" style="background:#00c3a0;color:#fff;border:none;border-radius:12px;padding:14px 36px;font-size:18px;box-shadow:0 2px 12px #00c3a044;cursor:pointer;text-decoration:none;display:inline-block;font-weight:600;letter-spacing:1px;transition:background 0.2s;">AI模拟面试</a>
            <button class="btn btn-primary" style="background:#ff9800;color:#fff;border:none;border-radius:12px;padding:14px 36px;font-size:18px;box-shadow:0 2px 12px #ff980044;cursor:pointer;font-weight:600;letter-spacing:1px;transition:background 0.2s;" onclick="openRiskModal()">岗位离职风险预测</button>
        </div>
        <div id="score-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);z-index:9999;align-items:center;justify-content:center;">
            <div style="background:#fff;border-radius:24px;box-shadow:0 12px 48px #0071e355;padding:48px 60px;min-width:480px;max-width:90vw;max-height:88vh;overflow-y:auto;">
                <h3 style="text-align:center;color:#0071e3;font-size:20px;margin-bottom:12px;">简历分析</h3>
                <div id="score-content"></div>
                <button onclick="document.getElementById('score-modal').style.display='none'" style="margin-top:18px;background:#0071e3;color:#fff;border:none;border-radius:8px;padding:6px 18px;font-size:15px;cursor:pointer;">关闭</button>
            </div>
        </div>
        <a href="/resumes" class="back-link" style="position:absolute;top:28px;right:38px;"><i class="fas fa-arrow-left"></i> 返回简历列表</a>
        <h2 style="text-align:center;font-size:22px;font-weight:700;color:#0071e3;margin-bottom:8px;letter-spacing:1px;"><i class="fas fa-file-alt"></i> 简历详情</h2>
        <div class="info-grid">
            <div class="info-card"><h3>姓名</h3><p id="candidateName">-</p></div>
            <div class="info-card"><h3>意向岗位</h3><p id="candidateJob">-</p></div>
            <div class="info-card"><h3>工作经验</h3><p id="candidateExperience">-</p></div>
            <div class="info-card"><h3>学历</h3><p id="candidateEducation">-</p></div>
            <div class="info-card"><h3>期望薪资</h3><p id="candidateSalary">-</p></div>
            <div class="info-card"><h3>年龄</h3><p id="candidateAge">-</p></div>
        </div>
        <div class="action-buttons">
            <button class="btn btn-secondary" onclick="window.location.href='/resumes'">返回</button>
            <button class="btn btn-primary" onclick="downloadResume()">下载简历</button>
        </div>
        <!-- 岗位风险预测弹窗 -->
        <div id="risk-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.22);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(2px);">
            <div style="background:linear-gradient(120deg,#f8fbff 60%,#e3f2fd 100%);border-radius:22px;box-shadow:0 12px 48px #00c3a055,0 2px 12px #0071e344;padding:48px 44px 38px 44px;min-width:400px;max-width:96vw;max-height:92vh;overflow-y:auto;position:relative;">
                <div style="display:flex;align-items:center;justify-content:center;margin-bottom:18px;">
                    <div style="width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#00c3a0 60%,#1e90ff 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px #00c3a044;">
                        <i class="fas fa-shield-alt" style="font-size:28px;color:#fff;"></i>
                    </div>
                </div>
                <h2 style="text-align:center;color:#0071e3;font-size:26px;font-weight:800;margin-bottom:8px;letter-spacing:1.5px;">岗位离职风险预测</h2>
                <div style="text-align:center;color:#888;font-size:15px;margin-bottom:18px;">AI智能分析 · 职业稳定性 · 动机一致性 · 规划清晰度</div>
                <hr style="border:none;border-top:1.5px solid #e0e0e0;margin:0 0 18px 0;">
                <div style="margin-bottom:16px;display:flex;align-items:center;gap:12px;">
                    <label style="font-size:16px;color:#555;font-weight:600;width:90px;text-align:right;">岗位名称：</label>
                    <input id="risk-position" type="text" style="padding:10px 16px;border-radius:8px;border:1.5px solid #e0e0e0;font-size:16px;width:220px;background:#fafdff;" placeholder="如：UI设计师" />
                </div>
                <div style="margin-bottom:16px;display:flex;align-items:flex-start;gap:12px;">
                    <label style="font-size:16px;color:#555;font-weight:600;width:90px;text-align:right;margin-top:4px;">简历内容：</label>
                    <textarea id="risk-resume" style="width:100%;height:90px;border-radius:8px;border:1.5px solid #e0e0e0;font-size:15px;background:#fafdff;resize:vertical;">{{ resume[3] }}</textarea>
                </div>
                <div style="display:flex;justify-content:center;gap:18px;margin-top:10px;">
                    <button class="btn btn-primary" style="background:linear-gradient(90deg,#00c3a0 60%,#1e90ff 100%);font-size:17px;padding:10px 38px;box-shadow:0 2px 8px #00c3a044;" onclick="predictRisk()"><i class="fas fa-robot" style="margin-right:8px;"></i>预测风险</button>
                    <button class="btn btn-secondary" style="margin-left:0;font-size:17px;padding:10px 32px;" onclick="closeRiskModal()">关闭</button>
                </div>
                <div id="risk-result" style="margin-top:26px;font-size:17px;color:#0071e3;line-height:1.8;"></div>
            </div>
        </div>
        </div>
        <div class="content-box">
            <div class="content-title"><i class="fas fa-user-edit" style="margin-right:8px;color:#00c3a0;"></i>简历正文内容</div>
            {% set lines = resume[3].split('\n') %}
            {% for line in lines %}
                {% set clean_line = line.strip() %}
                {% if clean_line == '' %}
                    {# 跳过空行 #}
                {% elif clean_line.startswith('[表格]') %}
                    <div class="resume-line" style="margin:0;">{{ clean_line[4:]|safe }}</div>
                {% elif clean_line.startswith('[图片]') %}
                    <div class="resume-line" style="text-align:center;margin:0;">
                        <img src="{{ clean_line[4:] }}" style="max-width:80%;border-radius:8px;box-shadow:0 2px 8px rgba(0,113,227,0.08);border:1px solid #e0e0e0;" />
                    </div>
                {% else %}
                    <div class="resume-line" style="margin:0;white-space:pre-wrap;word-break:break-all;font-size:16px;line-height:1.7;color:#222;">{{ clean_line|e }}</div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <script>
        // 岗位离职风险预测弹窗相关
        function openRiskModal() {
            document.getElementById('risk-modal').style.display = 'flex';
            document.getElementById('risk-result').innerHTML = '';
            document.getElementById('risk-position').value = '';
        }
        function closeRiskModal() {
            document.getElementById('risk-modal').style.display = 'none';
        }
        function predictRisk() {
            // 获取当前简历ID和岗位名称
            const resumeId = "{{ resume[0] }}";
            const position = document.getElementById('risk-position').value.trim();
            if(!resumeId) {
                document.getElementById('risk-result').innerHTML = '<span style="color:#d00;">简历ID缺失，无法预测</span>';
                return;
            }
            if(!position) {
                document.getElementById('risk-result').innerHTML = '<span style="color:#d00;">请填写岗位名称</span>';
                return;
            }
            document.getElementById('risk-result').innerHTML = 'AI正在分析岗位风险，请稍候...';
            fetch('/api/position_risk', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ resume_id: resumeId, position: position })
            })
            .then(res => res.json())
            .then(data => {
                if(data.success) {
                    // 卡片化美观展示
                    let riskScore = data.risk !== undefined ? data.risk : '无';
                    let msg = data.msg || '';
                    let msgHtml = msg
                        .replace(/(岗位名称[：:][^\n]*)/g, '<span style="color:#0071e3;font-weight:bold;">$1</span>')
                        .replace(/(职业稳定性分值[：:][^\n]*)/g, '<span style="color:#0071e3;font-weight:bold;">$1</span>')
                        .replace(/(求职动机一致性分值[：:][^\n]*)/g, '<span style="color:#0071e3;font-weight:bold;">$1</span>')
                        .replace(/(职业规划清晰度分值[：:][^\n]*)/g, '<span style="color:#0071e3;font-weight:bold;">$1</span>')
                        .replace(/(综合离职风险分值[：:][^\n]*)/g, '<span style="color:#0071e3;font-weight:bold;">$1</span>')
                        .replace(/(详细分析[：:])/g, '<span style="color:#0071e3;font-weight:bold;">$1</span>')
                        .replace(/\n/g, '<br>');
                    document.getElementById('risk-result').innerHTML = `
                        <div style="background:#fafdff;border-radius:14px;padding:18px 18px 12px 18px;box-shadow:0 2px 12px #00c3a022;max-width:520px;margin:0 auto;">
                            <div style="font-size:18px;font-weight:700;color:#d32f2f;margin-bottom:8px;letter-spacing:1px;text-align:center;">风险分值：<span style='font-size:22px;color:#d32f2f;'>${riskScore}/1</span></div>
                            <div style="border-top:1.5px dashed #e0e0e0;margin:10px 0 14px 0;"></div>
                            <div style="font-size:16px;color:#222;line-height:1.8;">${msgHtml}</div>
                        </div>
                    `;
                } else {
                    document.getElementById('risk-result').innerHTML = `<span style='color:#d00;'>${data.msg || '预测失败'}</span>`;
                }
            })
            .catch(err => {
                document.getElementById('risk-result').innerHTML = `<span style='color:#d00;'>请求异常：${err}</span>`;
            });
        }
        // 自动解析简历内容并填充关键信息
        document.addEventListener('DOMContentLoaded', function() {
            const resumeContent = `{{ resume[3] }}`;
            parseAndFillResumeInfo(resumeContent);
        });
        function parseAndFillResumeInfo(text) {
            // 姓名
            const nameMatch = text.match(/(姓名|名字)[：:\s]*([^\s，。；\n\r]+)/);
            document.getElementById('candidateName').textContent = nameMatch ? nameMatch[2] : '-';
            // 意向岗位
            const jobMatch = text.match(/(意向岗位|岗位|职位|应聘岗位)[：:\s]*([^\s，。；\n\r]+)/);
            document.getElementById('candidateJob').textContent = jobMatch ? jobMatch[2] : '-';
            // 学历
            const eduMatch = text.match(/(博士|硕士|本科|大专|高中|中专|本科在读)/);
            document.getElementById('candidateEducation').textContent = eduMatch ? eduMatch[1] : '-';
            // 工作经验，支持“X 年”“X年以上”“X年工作经验”等
            let exp = '-';
            const expMatch1 = text.match(/(\d{1,2}) ?年(工作)?(经验)?/);
            const expMatch2 = text.match(/(\d{1,2}) ?年以上/);
            const expMatch3 = text.match(/(应届生|1-3年|3-5年|5年以上)/);
            if (expMatch1) {
                exp = expMatch1[0].replace(' ', '');
            } else if (expMatch2) {
                exp = expMatch2[0].replace(' ', '');
            } else if (expMatch3) {
                exp = expMatch3[0];
            }
            document.getElementById('candidateExperience').textContent = exp;
            // 期望薪资
            const salaryMatch = text.match(/(期望薪资|薪资|期望工资|期望月薪)[：:\s]*([0-9\-~kK万]+)/);
            document.getElementById('candidateSalary').textContent = salaryMatch ? salaryMatch[2] : '-';
            // 年龄，支持“X岁”或“年龄：X”
            let age = '-';
            const ageMatch1 = text.match(/(\d{1,2})岁/);
            const ageMatch2 = text.match(/年龄[：:\s]*([0-9]{1,2})/);
            if (ageMatch1) {
                age = ageMatch1[1] + '岁';
            } else if (ageMatch2) {
                age = ageMatch2[1] + '岁';
            }
            document.getElementById('candidateAge').textContent = age;
        }
        function downloadResume() {
            const filename = '{{ resume[1] }}';
            const content = `{{ resume[3] }}`;
            const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 100);
        }
        window.onload = function() {
            document.getElementById('score-btn').onclick = function() {
                document.getElementById('score-content').innerHTML = `<div style='color:#888;font-size:16px;padding:32px 0;text-align:center;'>正在分析中...</div>`;
                document.getElementById('score-modal').style.display = 'flex';
                fetch('/api/score_resume?id={{ resume[0] }}')
                    .then(res => res.json())
                    .then(data => {
                        let html = '';
                        if(data.success && data.score && data.score.ai_summary) {
                            html += `<div style='margin-top:8px;padding:18px;background:#f8faff;border-radius:10px;box-shadow:0 2px 8px #0071e322;'>`
                                + `<div style='font-weight:700;color:#0071e3;margin-bottom:8px;'>AI优势/技能/劣势/推荐岗位总结：</div>`
                                + `<div style='color:#333;white-space:pre-line;font-size:15px;'>${data.score.ai_summary}</div>`
                            + `</div>`;
                        } else {
                            html += `<span style='color:red;'>无AI分析结果，请检查后端接口和数据格式。</span>`;
                        }
                        document.getElementById('score-content').innerHTML = html;
                    });
            };
        }
    </script>
</body>
</html>
